<template>
  <div class="industry-tag-selector">
    <el-select
      v-model="selectedTags"
      multiple
      filterable
      placeholder="请选择行业标签"
      style="width: 100%"
      @change="handleChange"
    >
      <el-option
        v-for="tag in tagOptions"
        :key="tag.id"
        :label="tag.name"
        :value="tag.id"
      >
        <div class="tag-option">
          <el-tag 
            :color="tag.color" 
            size="small"
            style="margin-right: 8px;"
          >
            {{ tag.name }}
          </el-tag>
          <span class="tag-description">{{ tag.description }}</span>
        </div>
      </el-option>
    </el-select>
    
    <!-- 已选标签展示 -->
    <div v-if="selectedTags.length > 0" class="selected-tags">
      <el-tag
        v-for="tag in selectedTagList"
        :key="tag.id"
        :color="tag.color"
        closable
        @close="removeTag(tag.id)"
        style="margin: 4px;"
      >
        {{ tag.name }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

// 使用相对路径导入
import { getIndustryTagsApi } from '../../api/system/industryTags'

interface IndustryTag {
  id: number
  name: string
  code: string
  description: string
  color: string
  sortOrder: number
  status: number
}

const props = defineProps<{
  modelValue: number[]
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number[]]
}>()

const tagOptions = ref<IndustryTag[]>([])
const selectedTags = ref<number[]>([])

// 已选标签列表
const selectedTagList = computed(() => {
  return tagOptions.value.filter(tag => selectedTags.value.includes(tag.id))
})

// 获取行业标签列表
const getTagOptions = async () => {
  try {
    const { data } = await getIndustryTagsApi({ status: 1 })
    tagOptions.value = data
  } catch (error) {
    console.error('获取行业标签失败:', error)
    // 如果API调用失败，使用模拟数据
    tagOptions.value = [
    { id: 1, name: '美食', code: 'food', description: '美食烹饪与饮食分享', color: '#f5222d', sortOrder: 1, status: 1 },
  { id: 2, name: '汽车', code: 'automobile', description: '汽车评测与资讯', color: '#722ed1', sortOrder: 2, status: 1 },
  { id: 3, name: '时尚', code: 'fashion', description: '时尚穿搭与潮流趋势', color: '#eb2f96', sortOrder: 3, status: 1 },
  { id: 4, name: '健身', code: 'fitness', description: '健身运动与健康生活', color: '#52c41a', sortOrder: 4, status: 1 },
  { id: 5, name: '三农', code: 'agriculture', description: '农业、农村、农民相关内容', color: '#a0d911', sortOrder: 5, status: 1 },
  { id: 6, name: '校园教育', code: 'campus_education', description: '校园教学与教育资讯', color: '#1890ff', sortOrder: 6, status: 1 },
  { id: 7, name: '休闲', code: 'leisure', description: '休闲娱乐内容', color: '#13c2c2', sortOrder: 7, status: 1 },
  { id: 8, name: '人文社科', code: 'humanities', description: '人文社会科学内容', color: '#fa541c', sortOrder: 8, status: 1 },
  { id: 9, name: '科普', code: 'science_popularization', description: '科普知识传播', color: '#2f54eb', sortOrder: 9, status: 1 },
  { id: 10, name: '生活居家', code: 'lifestyle', description: '生活技巧与家庭布置', color: '#fa8c16', sortOrder: 10, status: 1 },
  { id: 11, name: '体育', code: 'sports', description: '体育赛事与运动分享', color: '#08979c', sortOrder: 11, status: 1 },
  { id: 12, name: '动漫动画', code: 'anime', description: '动漫与动画作品', color: '#d46b08', sortOrder: 12, status: 1 },
  { id: 13, name: '游戏', code: 'gaming', description: '游戏内容与实况', color: '#9254de', sortOrder: 13, status: 1 },
  { id: 14, name: '医疗健康', code: 'healthcare', description: '医疗与健康知识', color: '#f759ab', sortOrder: 14, status: 1 },
  { id: 15, name: '财经', code: 'finance', description: '财经新闻与理财', color: '#faad14', sortOrder: 15, status: 1 },
  { id: 16, name: '时政社会', code: 'current_affairs', description: '时事政治与社会观察', color: '#597ef7', sortOrder: 16, status: 1 },
  { id: 17, name: '影视综艺', code: 'entertainment', description: '影视与综艺节目', color: '#ff85c0', sortOrder: 17, status: 1 },
  { id: 18, name: '舞蹈音乐', code: 'music_dance', description: '音乐与舞蹈表演', color: '#36cfc9', sortOrder: 18, status: 1 },
  { id: 19, name: '亲子', code: 'parenting', description: '亲子教育与家庭互动', color: '#ffc53d', sortOrder: 19, status: 1 },
  { id: 20, name: '剧情演绎', code: 'drama', description: '剧情演绎短片或表演', color: '#ff7a45', sortOrder: 20, status: 1 },
  { id: 21, name: '科技', code: 'technology', description: '科技资讯与产品介绍', color: '#2f54eb', sortOrder: 21, status: 1 },
  { id: 22, name: '萌宠', code: 'pets', description: '宠物相关内容', color: '#73d13d', sortOrder: 22, status: 1 },
  { id: 23, name: '旅游', code: 'travel', description: '旅行记录与攻略分享', color: '#40a9ff', sortOrder: 23, status: 1 },
  { id: 24, name: '随拍', code: 'vlog', description: '日常随拍视频', color: '#d9d9d9', sortOrder: 24, status: 1 },
  { id: 25, name: '其它', code: 'other', description: '其它未分类内容', color: '#bfbfbf', sortOrder: 25, status: 1 }
    ]
  }
}

// 处理选择变化
const handleChange = (value: number[]) => {
  emit('update:modelValue', value)
}

// 移除标签
const removeTag = (tagId: number) => {
  const newValue = selectedTags.value.filter(id => id !== tagId)
  selectedTags.value = newValue
  emit('update:modelValue', newValue)
}

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  selectedTags.value = newValue || []
}, { immediate: true })

onMounted(() => {
  getTagOptions()
})
</script>

<style scoped>
.industry-tag-selector {
  width: 100%;
}

.tag-option {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.tag-description {
  color: #666;
  font-size: 12px;
  margin-left: auto;
}

.selected-tags {
  margin-top: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background-color: #f8f9fa;
  transition: all 0.2s;
}

.selected-tags:hover {
  border-color: #c0c4cc;
}

.selected-tags .el-tag {
  margin: 4px 6px 4px 0;
  font-size: 13px;
  height: 28px;
  line-height: 26px;
  border-radius: 4px;
}

.selected-tags .el-tag:last-child {
  margin-right: 0;
}

/* 选择器下拉面板样式优化 */
:deep(.el-select-dropdown) .el-select-dropdown__item {
  padding: 12px 16px;
  line-height: 1.4;
}

:deep(.el-select-dropdown) .el-select-dropdown__item:hover {
  background-color: #f5f7fa;
}

:deep(.el-select-dropdown) .el-select-dropdown__item.is-selected {
  background-color: #e6f4ff;
}

:deep(.el-select-dropdown) .el-select-dropdown__item.is-selected .tag-option .el-tag {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

/* 选择器输入框样式 */
:deep(.el-select) .el-input__wrapper {
  min-height: 40px;
}

:deep(.el-select) .el-input__wrapper .el-input__inner {
  height: 38px;
  line-height: 38px;
}

:deep(.el-select) .el-input__wrapper .el-select__placeholder {
  color: #a8abb2;
}

:deep(.el-select) .el-select__tags-text {
  font-size: 13px;
}
</style> 